<template>
    <div class="configure_container">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane v-for="item in tabList" :key="item.value" :label="item.label" :name="item.value">
                <ConfigureIndex v-if="activeName == 1 && item.value == 1" />
                <CustomerPhase v-if="activeName == 2 && item.value == 2" />
                <CustomerSource v-if="activeName == 3 && item.value == 3" />
                <InvalidReason v-if="activeName == 4 && item.value == 4" />
                <Enterprise v-if="activeName == 5 && item.value == 5" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import ConfigureIndex from './components/ConfigureIndex.vue';
import Enterprise from './components/EnterPrise.vue';
import CustomerPhase from './components/CustomerPhase/Index.vue';
import CustomerSource from './components/CustomerSource/Index.vue';
import InvalidReason from './components/InvalidReason/Index.vue';
const activeName = ref(1);
const tabList = ref([
    { label: '客户属性', value: 1 },
    { label: '企业属性', value: 5 },
    { label: '客户阶段', value: 2 },
    { label: '客户来源', value: 3 },
    { label: '无效原因', value: 4 }
]);
</script>

<style lang="scss" scoped>
.configure-content-box {
    box-sizing: border-box;
    background-color: #fff;

    .demo-tabs {
        height: 56px;
    }
}

.configure_container {
    padding: 24px;
    padding-top: 10px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;

    .el-tabs__nav-wrap::after {
        height: 1px;
        background-color: #eaeaea;
    }
}
</style>
